<template>
    <div>
        <h1>房型增加</h1>
        <table>
            <tbody>
                <tr>
                    <td>房型名称</td>
                    <td><input type="text" v-model="info.rootname" /></td>
                </tr>  
                <tr>
                    <td>售价</td>
                    <td><input type="text" v-model="info.price" /></td>
                </tr>
                <tr>
                    <td>面积</td>
                    <td><input type="text" v-model="info.mianj" /></td>
                </tr>  
                <tr>
                    <td>数量</td>
                    <td><input type="text" v-model="info.num" /></td>
                </tr>
                <tr>
                    <td>图片</td>
                    <td>
                        <input type="file" @change="Getpoto" />
                        <img :src="info.poto"  width="100" height="100">
                    </td>
                </tr>  
                <tr>
                    <td>介绍</td>
                    <td>
                        <input type="text" v-model="info.jies" />
                    </td>
                </tr>
                <tr>
                    <td>加床</td>
                    <td>
                            <input type="radio" v-model="info.chuang" :value="1" />加床
                            <input type="radio" v-model="info.chuang" :value="0"  />不加床
                    </td>
                </tr>  
                <tr>
                    <td>含早</td>
                    <td>
                            <input type="radio" v-model="info.zao" name="zao" :value="1" />含早
                            <input type="radio" v-model="info.zao" name="zao" :value="0"  />不含早
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td><input type="button" class="btn btn-success" value="增加" @click="ok" /></td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">

import { onMounted,reactive,ref } from 'vue';
import { useRoute,useRouter } from 'vue-router';
import axios from 'axios'

const route=useRoute();
const router=useRouter();

let info:any=reactive({
    rootname:'',
    price:'',
    mianj:'',
    num:'',
    poto:'https://localhost:7100/imgurl/1.jpg',
    jies:'',
    chuang:1,
    zao:1
})

const Getpoto=(e:any)=>{
    let newfile=e.target.files[0];
    let formdata=new FormData();
    formdata.append('file',newfile);
    axios({
        url:'https://localhost:7100/api/Imgurl/Getimgurl',
        method:'post',
        data:formdata
    })
    .then(res=>{
        console.log(res);
        info.poto=res.data;
        console.log(info.poto);
    })
    .catch(err=>{
        console.log(err);
    })
}

const ok=()=>{
    axios({
        url:'https://localhost:7100/api/RootX/RootAdd',
        method:'post',
        data:info
    }).then(res=>{
        console.log(res);
        if(res.data>0){
            alert('增加成功!');
        }
        else{
            alert('增加失败!');
        }
    })
}


</script>